<template>
  <view class="menu-list" :style="{color: color, backgroundColor: backgroundColor}" @click="menuClick">
    <view class="menu-left">
      <slot></slot>
      <i v-if="leftIcon" class="iconfont" :class="leftIcon" />
      <image v-if="leftImage" class="left-image" :src="leftImage" />
    </view>
    <view class="menu-middle">{{menuName}}</view>
    <view class="menu-right">
      <slot name="right"></slot>
      <i v-if="rightIcon" class="iconfont" :class="rightIcon" @click.stop="clickRight" />
      <image v-if="rightImage" class="right-image" :src="rightImage" @click.stop="clickRight" />
    </view>
  </view>
</template>

<script setup>
	/**
	 * menuList 菜单列
	 * @description 个人中心功能菜单列
	 * @property {String} leftImage 左侧图标图片
	 * @property {String} leftIcon 左侧图标
	 * @property {String} menuName 功能名称
	 * @property {String} color 字体颜色
	 * @property {String} backgroundColor 背景颜色
	 * @property {String} rightImage 右侧图标图片
	 * @property {String} rightIcon 右侧图标
	 * @event {Function} onClick 点击菜单出触发
	 * @event {Function} clickRight 右侧按钮点击时触发
	 */
	const props = defineProps({
		leftImage: {
			type: String,
			default: ''
		},
		leftIcon: {
			type: String,
			default: ''
		},
		menuName: {
			type: String,
			default: ''
		},
		rightImage: {
			type: String,
			default: ''
		},
		rightIcon: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#000000'
		},
		backgroundColor: {
			type: String,
			default: '#FFFFFF'
		}
	})
	const emits = defineEmits(['onClick','clickRight'])
	
	const menuClick = () =>{
		emits('onClick')
	}
	const clickRight = () =>{
		emits('clickRight')
	}
</script>

<style lang="scss">
.menu-list {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #E5E5E5;
  box-sizing: border-box;

  .menu-left {
    display: flex;
    align-items: center;
    width: 80rpx;
    
    .iconfont {
      color: var(--primary-color);
      font-size: 44rpx;
    }
    
    .left-image {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .menu-middle {
    flex: 1;
    font-size: 28rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-right {
    display: flex;
    align-items: center;
    width: 80rpx;
    justify-content: flex-end;
    
    .iconfont {
      color: var(--primary-color);
      font-size: 36rpx;
    }
    
    .right-image {
      width: 36rpx;
      height: 36rpx;
    }
  }
}
</style>
